// @ts-nocheck
import React, { useEffect, useState } from "react";
import { Button, SearchBar, DotLoading, InfiniteScroll } from "antd-mobile";
import { Spin } from 'antd';
import { PageHeader } from "@/components";
import { useNavigate } from "react-router-dom";
import { getPersonnelList } from "../service";
import { specialAttentionTypeMenu } from './utils/menu'
import "./index.less";
interface ItabsData {
    label: string;
    value: number
}
const tabsData: ItabsData[] = [
    { label: '姓名', value: 1 },
    { label: '身份证', value: 2 },
    { label: '手机号', value: 3 },
]
let timer = null;
const Personnel: React.FC = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const navigate = useNavigate();
    const [active, setActive] = useState<number>(1);
    const [keyword, setKeyword] = useState<string>('')
    const [personnelData, setPersonnelData] = useState([])
    const [isfiring, setIsfiring] = useState<boolean>(false)
    const [current, setCurent] = useState<number>(1)
    const [hasMore, setHasMore] = useState<boolean>(true);

    const onChange = (val: string) => {
        setKeyword(val)
        clearTimeout(timer);
        timer = setTimeout(() => {
            setIsfiring(true)
        }, 500);
        setIsfiring(false)
    }
    const loadMore = async (curr?: number) => {
        setLoading(true)
        setCurent(curr ? curr : (v) => v += 1)
        const { data: { records } } = await getPersonnelList({
            size: 10,
            current,
            keyword
        })
        setLoading(false)
        const data = (records && records.length) ? records : [];
        if (current === 1) {
            setPersonnelData(data)
        } else {
            setPersonnelData(v => [...v].concat(data))
        }
        setHasMore(data.length > 0)
    }
    useEffect(() => {
        if (isfiring) {
            setPersonnelData([])
            setHasMore(true)
            loadMore(1)
        }
    }, [isfiring])
    const specialAttention = (type: string) => {
        if (type) {
            let typeArr = type.split(',');
            return specialAttentionTypeMenu.filter((item) => typeArr.includes(`${item.value}`)).map((item) => item.label).join('、')
        }
        return ''
    }
    return (
        <div className="personnel">
            <PageHeader title="人员查询" />
            <div className="centent_box" style={{ paddingBottom: '2rem', paddingTop: '17.8rem' }}>
                <div className="head_search">
                    <div className="tabs_box">
                        {
                            tabsData.map((item, index) => {
                                return <Button color="primary" fill={item.value == active ? 'solid' : 'outline'} key={index} onClick={() => setActive(item.value)}>{item.label}</Button>
                            })
                        }
                    </div>
                    <div className="search_box">
                        <SearchBar
                            placeholder={`请输入${{ 1: '姓名', 2: '身份证', 3: '手机号' }[active]}`}
                            showCancelButton
                            onChange={onChange}
                            style={{
                                '--border-radius': '100px',
                                '--background': '#ffffff',
                                '--height': '48px',
                                '--padding-left': '12px',
                            }}
                        />
                    </div>
                </div>
                <Spin tip="加载中..." spinning={loading}>
                    <div className="list_box">
                        {
                            personnelData.map((item, index) => {
                                return <div className="list" key={index}>
                                    <div className="img_box">
                                        <img src="/images/home/hdbm1.png" alt="" />
                                    </div>
                                    <div className="right_text">
                                        <div className="text name">
                                            <span>{item.name}</span>
                                            <span>{item.sex}</span>
                                            <span>{specialAttention(item.specialAttentionType)}</span>
                                        </div>
                                        <div className="text">{item.phone}</div>
                                        <div className="text address">{item.liveaddress}</div>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </Spin>
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </div>
        </div>
    );
};
export default Personnel;
